<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
    <script src="intelxdk.js"></script>
    <script src="cordova.js"></script>
    <script src="xhr.js"></script>
    
    <script src="js/app.js"></script>
    <script src="js/init-app.js"></script>
    <script src="js/init-dev.js"></script>
    
    <script type="application/javascript" src="js/jquery.min.js"></script>
    <script type="application/javascript" src="js/md5.js"></script>
    <script type="application/javascript" src="js/jquery.cookie.min.js"></script>
    <script type="application/javascript" src="js/menu.js"></script>
    
    <link rel="stylesheet" href="css/style.css" type="text/css"/>

<style type="text/css">        
    
@media screen and (orientation:portrait) and (max-height: 1000px){ 
    #wrapper{
        position:fixed;
        width: 100%;
        height: 100%;
        margin-left: 30%;
        margin-top: 50%;
    }
    #background{
        position:fixed;
        margin-left: -30%;
        margin-top: -60%;
    }
    #img{
        content: url('img/account/overview_prt.png');
        position: fixed;
        min-height: 100%;
        max-height: 20000px;
        max-width: 100%;
    }
    
    #nameDiv{
        position: fixed;
        margin-top:-10%;
        margin-left:-10%;
    }
    #emailDiv{
        position: fixed;
        margin-top:5%;
        margin-left:-10%;
    }
    #passDiv{
        position: fixed;
        margin-top:35%;
        margin-left:-10%;
    }
    /*display fields*/
    #name, #email{
        position: fixed;
        color: white;
        background-color: transparent;
        font-size: 30px;
        width: 80%;
        min-height: 40px;
        margin-left: -9%;
        margin-top: 0.5%;
        outline: 0;
    }
    
    #buttons{
        position: fixed;
        margin-top: 45%;
        margin-left: -20%;
    }
    .button{
        float:left;
        width:90%;
        margin-bottom: 10px;
    }
}

@media screen and (orientation:landscape) and (max-width: 1000px){ 
    #wrapper{
        position:fixed;
        max-width:100%;
        max-height:100%;
        margin-left: 30%;
        margin-top: 50%;
    }
    #background{
        position:fixed;
        margin-left: -28%;
        margin-top: -48%;
    }
    #img{
        content: url('img/account/overview.png');
        position: fixed;
        min-height: 100%;
        max-height: 20000px;
        max-width: 100%;
        margin-left: -3%;
    }
    
    #nameDiv{
        position: fixed;
        margin-top:-40%;
        margin-left:-10%;
    }
    #emailDiv{
        position: fixed;
        margin-top:-35%;
        margin-left:-10%;
        padding-top: 0px;
    }
    #passDiv{
        position: fixed;
        margin-top:-10%;
        margin-left:-10%;
    }
    /*display fields*/
    #name, #email{
        position: fixed;
        color:white;
        background-color: transparent;
        font-size: 30px;
        max-height: 100%;
        margin-left: 1%;
        margin-top: 0%;
        outline: 0;
        width: 58%;
    }
        
    #buttons{
        position: fixed;
        margin-top: -20%;
        margin-left: -7%;
    }
    .button{
        float:left;
        width:80%;
        margin-bottom: 10px;
    }
} 
    
@media screen and (orientation:portrait) and (min-height: 1000px){ 
    #wrapper{
        position:fixed;
        width: 100%;
        height: 100%;
        margin-left: 0%;
        margin-top: 0%;
    }
    #background{
        position:fixed;
        margin-left: 20%;
        margin-top: 10%;
    }
    #img{
        content: url('img/account/overview_prt.png');
        position: absolute;
        height: 1000px;
        width: 500px;
    }
    
    #nameDiv{
        position: fixed;
        margin-top:30%;
        margin-left:20%;
    }
    #emailDiv{
        position: fixed;
        margin-top:35%;
        margin-left:20%;
    }
    /*display fields*/
    #name, #email{
        color: white;
        background-color: transparent;
        font-size: 50px;
        width: 80%;
        min-height: 40px;
        outline: 0;
    }
    
    #buttons{
        position: fixed;
        margin-top: 55%;
        margin-left: 25%;
        max-width: 500px;
    }
    #changePass{
        position: absolute;
        width:400px;
    }
    #logout{
        position: absolute;
        width:400px;
        top: 100px;
    }
}

@media screen and (orientation:landscape) and (min-width: 1000px){ 
    #wrapper{
        position:fixed;
        max-width:100%;
        max-height:100%;
        margin-left: 0px;
        margin-top: 0px;
    }
    #background{
        position:fixed;
        margin-left: 10%;
        margin-top: 22%;
    }
    #img{
        content: url('img/account/overview.png');
        position: absolute;
        height: 500px;
        width: 1000px;
    }
    
    #nameDiv{
        position: fixed;
        top: 40%;
        left: 25%;
    }
    #emailDiv{
        position: fixed;
        top: 45%;
        left: 25%;
    }
    /*display fields*/
    #name, #email{
        color:white;
        background-color: transparent;
        font-size: 60px;
        max-height: 100%;
        outline: 0;
    }
        
    #buttons{
        position: fixed;
        top:55%;
        margin-left: 30%;
        max-width:500px;
    }
    #changePass{
        width:500px;
    }
    #logout{
        width:500px;
        top: 50px;
    }
}

</style>
    
</head>    
    
<body> 
    <div id='wrapper'>
        <div id='background'>
            <img alt='register' id='img'/>
        </div>
        <div id='nameDiv'>
            <label id='name' > </label>
        </div>
        <div id='emailDiv'>
            <label id='email'> </label>
        </div>
        <div id='buttons'>
            <img alt='changePass' class='button' id='changePass' src="img/account/changepassBtn.png"/>
            <img alt='logout' class='button' id='logout' src="img/account/logoutBtn.png"/>
        </div>
    </div>
    
    <script>
        function getData(userId)
            {
                var urlAjax = getUrlServlet() + "utf?method=getUserData&userId="+userId,
                    header = "application/x-www-form-urlencoded;charset=utf-8",
                    type = "GET";

                $.ajax({
                    url : urlAjax,
                    type : type,
                    dataType : 'JSON',
                    contentType : header,
                    encoding : "utf-8",
                    error : function(data, status, jqx) {

                        alert(status);

                },
                    success : function(data, status, jqx) {   
                        document.getElementById('name').innerHTML = data.name;
                        document.getElementById('email').innerHTML = data.login;
                        
                        $('#name').html(data.name);
                        $('#email').html(data.login);
                        

                    }
                });
            }
        
        
        $(window).load(function(){
            getData(getUserId());
        });

        $('#changePass').on('click', function(){
            window.location.href = 'changepass.html';
        });
        
        $('#logout').on('click', function(){
            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFDDelete, fail);
            
            setTimeout(function(){signOut();},1500);
        });
        
        function gotFDDelete(fileSystem) {
        fileSystem.root.getDirectory("Hexar", {create: false}, onGetDirectoryWinDelete, fail);
		}
			
		function onGetDirectoryWinDelete(parent){
			parent.getFile("config.txt", {create: false, exclusive: false}, gotRemoveFileEntry, fail);
		}

		function gotRemoveFileEntry(fileEntry) {
			fileEntry.remove(success, fail);
		}

		function success(entry) {
			console.log("Removal succeeded");
		}
		
		function fail(evt) {
			console.log(evt.target.error.code);
		}
    </script>
</body>
</html>
